<template>
  <div class="dialog_info">
    <div class="dialog_info_title">
      <el-tabs class="" v-model="tabsName" tab-position="top" @tab-click="handleClick">
        <el-tab-pane label="洪水分析" name="洪水分析">
          <FloodAnalysisInfo />
        </el-tab-pane>
        <el-tab-pane label="沿河村庄" name="沿河村庄">
          <div class="zhouDataTable">
            <el-table
              v-loading="loading"
              :data="VillageDataList.data"
              class="flagTable rainLimitTable"
              style="width: 100%"
              height="470"
            >
              <el-table-column prop="countyAdnm" align="center" label="县名" />
              <el-table-column prop="townAdnm" align="center" label="村庄名称" />
              <el-table-column prop="adnm" align="center" label="村庄名称" />
              <el-table-column prop="pCount" align="center" label="人口 " />
              <el-table-column prop="jCount" align="center" label="建档立卡人口 " />
              <el-table-column prop="htCount" align="center" label="户数" />
              <el-table-column prop="plarea" align="center" label="防洪能力" />
              <el-table-column prop="userFullName" align="center" label="防汛责任人" />
              <el-table-column prop="parseFloat(len/1000).toFixed(3)" align="center" label="距河道距离(km)" />
              <el-table-column label="预警指标(mm)" align="center">
                <el-table-column prop="drp1H" align="center" label="1h" />
                <el-table-column prop="drp2H" align="center" label="3h" />
                <el-table-column prop="drp3H" align="center" label="6h" />
              </el-table-column>
            </el-table>
            <div class="page-wrap">
              <el-pagination
                background
                :page-sizes="pageInfo.sizeList"
                :current-page="Pageipage"
                :page-size="Pageirows"
                :total="VillageDataList.dataCount"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="预警过程" name="预警过程">
          <template v-if="ProtectionData.length>0">
            <div class="timeline">
              <div v-for="(item, index) in ProtectionData" :key="index" class="timelineList">
                <div class="timeline_left">
                  <div class="timeline_title">{{ item.warnState }}</div>
                  <div>{{ $moment(item.tm).format("YYYY-MM-DD HH:mm") }}</div>
                </div>
                <div class="timeline_right">
                  <div>{{ item.ewInfo1 }}{{ item.ewInfo2 }}</div>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="noData">暂无数据</div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import FloodAnalysisInfo from '@/views/main/prediction/ShortPro/FloodAnalysisInfo'
import MixinPage from '@/views/components/MixinPage'
import {
    GetProtectionVillageByRvcd,
    GetEarlyWarningProcess
} from '@/api/zyx.js'
export default {
    components: {
        FloodAnalysisInfo
    },
    mixins: [MixinPage],
    data() {
        return {
            tabsName: '洪水分析',
            parameter: {},
            VillageDataList: [],
            ProtectionData: [],
            Pageipage: 1,
            Pageirows: 10,
            tab2: false,
            tab3: false,
            loading: false
        }
    },
    created() {
        this.parameter = this.$store.getters.dlgParams.params
    },
    methods: {
        handleClick(tab, event) {
            if (Number(tab.index) === 1) {
                if (!this.tab2) {
                    this.GetProtectionVillageByRvcd()
                }
            } else if (Number(tab.index) === 2) {
                if (!this.tab3) {
                    this.GetEarlyWarningProcess()
                }
            }
        },
        GetProtectionVillageByRvcd() {
            this.loading = true
            const params = {
                Rvcd: this.parameter.rvcd,
                page: this.Pageipage,
                limit: this.Pageirows
            }
            GetProtectionVillageByRvcd(params).then((res) => {
                if (res.isSuccess) {
                    this.loading = false
                    this.tab2 = true
                    this.VillageDataList = res
                }
            })
        },
        /** 显示条数*/
        handleSizeChange(val) {
            this.Pageirows = val
            this.GetProtectionVillageByRvcd()
        },
        /** 翻页*/
        handleCurrentChange(val) {
            this.Pageipage = val
            this.GetProtectionVillageByRvcd()
        },
        GetEarlyWarningProcess() {
            this.loading = true
            const params = {
                Rvcd: this.parameter.rvcd,
                dtTime: this.parameter.Ntm,
                sType: 2
            }
            GetEarlyWarningProcess(params).then((res) => {
                if (res.isSuccess) {
                    this.loading = false
                    this.tab3 = true
                    this.ProtectionData = res.data
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>

	/deep/.el-tabs__nav-scroll {
		justify-content: left !important;
	}

	.dialog_info {
		height: 100%;
     min-height:78vh;
		.dialog_info_title {
			height: 100%;

			/deep/.el-tabs {
        height: 100%;
        padding:0px 20px;

			}
		}
	}

	.timeline {
		width: 100%;
		height: 100%;
		padding: 20px;
		overflow: auto;
		position: relative;
		color: #fff;

		.timelineList {
			display: -webkit-flex;
			display: flex;
			width: 100%;
			margin-bottom: 10px;

			.timeline_left {
				width: 200px;
				padding-right: 20px;
				text-align: right;

				.timeline_title {
					font-size: 16px;
					font-weight: bold;
					color: #00e9ff;
				}
			}

			.timeline_right {
				position: relative;
				padding-left: 3%;
				width: calc(~"100% - 220px");
			}

			.timeline_right:after {
				content: "";
				width: 16px;
				height: 16px;
				border-radius: 50%;
				background: #649ff4;
				box-shadow: 0 0 10px #3484f7;
				position: absolute;
				top: 0;
				left: -6px;
				z-index: 9;
			}
		}
	}

	.timeline::after {
		content: "";
		width: 3px;
		height: 100%;
		background: #1b1670;
		position: absolute;
		top: 0;
		left: 220px;
	}

	.zhouDataTable {
		.el-link.el-link--default {
			color: #fff;
		}

		.el-button {
			background-color: #086497;
			border-color: #14275b;
			color: #fff;
			border-radius: 5px;
		}

		.flagTable .el-table__body tr .cell {
			height: 15px;
			line-height: 15px;
		}

		/deep/ .flagTable th,
		/deep/ .flagTable th,
		.flagTableDiv {
			background: #0a065a;
			color: #fff;
		}

		.el-table--border::after {
			background-color: #14275b;
		}
	}

	/deep/ .el-tabs__nav-wrap::after {
		height:35px;
    background: none;
	}

	/deep/ .el-tabs__active-bar {
		display: none;
	}

	/deep/ .el-tabs__header {
		margin: 0 !important;
    border-bottom: 1px solid #335875;
    padding-bottom: 0.9375rem;
    height: auto;
    overflow: hidden;
	}

	/deep/ .el-tabs__item {
		color: #3c62b2;
		width: 100px;
    padding: 0 10px;
		text-align: center;
    line-height: 30px;
    height: 30px;
    margin-left: 5px;
    background: rgba(9, 37, 72, 0.39);
    border: 1px solid #75b0fc;
		color: #fff;

	}

	/deep/.el-tab-pane {
		height: 100%;
	}
	/deep/ .el-tabs__item.is-active {
		background: url("~@/assets/newimg/btnPlay_active.png") no-repeat;
		background-size: 100% 100%;
		padding: 0;
    height: 35px;
    line-height: 35px;
    border: 0 none;
	}
	.noData{
		font-size: 16px;
		font-weight: bold;
		color: #3959a1;
		text-align: center;
		margin-top: 20%;
	}
</style>
